<template>
  <div class="container">
    <el-card>
      <!-- 新增按钮 -->
      <el-row>
        <el-col>
          <el-button style="float: right" type="success" icon="el-icon-edit" size="small" @click="addQuestion">新增试题</el-button>
        </el-col>
      </el-row>
      <!-- 筛选区域 -->
      <el-form ref="queryForm" :model="queryForm" label-width="80px">
        <el-row>
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" prop="subjectID">
              <el-select style="width: 100%" placeholder="请选择" v-model="queryForm.subjectID" @change="onsubChange">
                <el-option v-for="(item, index) in subject" :key="index" :label="item.subjectName" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.catalogID" />
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.tags" />
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" prop="keyword">
              <el-input v-model="queryForm.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" prop="questionType">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.questionType" @change="onDirectoryChange">
                <el-option v-for="(item, index) in questionType" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" prop="difficulty">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.difficulty" @change="onDirectoryChange">
                <el-option v-for="(item, index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" prop="direction">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.direction" @change="onDirectoryChange">
                <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" prop="creatorID">
              <el-select placeholder="请选择" style="width: 100%" v-model="queryForm.creatorID" @change="onDirectoryChange">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注" prop="remarks">
              <el-input v-model="queryForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="queryForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select placeholder="请选择" class="province" v-model="queryForm.province" prop="province" @change="onProvinceChange">
                <el-option v-for="(item, index) in province" :key="index" :label="item" :value="item"></el-option>
              </el-select>
              <el-select placeholder="请选择" class="city" v-model="queryForm.city" prop="city">
                <el-option v-for="(item, index) in citys" :key="index" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right">
              <el-button @click="resetForm('queryForm')" size="small">清除</el-button>
              <el-button type="primary" size="small" @click="getQuestionList">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 列表区域 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
      <el-alert :title="'数据一共' + counts + '条'" type="info" show-icon :closable="false"></el-alert>
      <!-- 表格区域 -->
      <el-table :data="questionList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="280"></el-table-column>
        <el-table-column prop="subject" label="学科" width="180"></el-table-column>
        <el-table-column prop="catalog" label="目录" width="100"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="100">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row }} -->
              <span>{{ getQuesType(scope.row.questionType) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="280">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="280">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row }} -->
              <span>{{ getdifficulty(scope.row.difficulty) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="180"></el-table-column>
        <el-table-column prop="chkState" label="审核状态">
          <template slot-scope="scope">
            <div>
              <span>{{ getchkType(scope.row.chkState) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见"></el-table-column>
        <el-table-column prop="chkUser" label="审核人"></el-table-column>
        <el-table-column prop="publishState" label="发布状态">
          <template slot-scope="scope">
            <div>
              <span>{{ getpublishState(scope.row.publishState) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" fixed="right">
          <template slot-scope="scope">
            <div class="cz-btn">
              <el-button size="mini">预览</el-button>
              <el-button size="mini" @click="questionsCheck(scope.row)" :class="{ disabled: scope.row.chkState !== 0 }" :disabled="scope.row.chkState !== 0">审核</el-button>
              <el-button size="mini" :class="{ disabled: scope.row.publishState !== 0 }" :disabled="scope.row.publishState !== 0">修改</el-button>
              <el-button size="mini" @click="pubQuestion(scope.row, $event)">{{ scope.row.publishState === 1 ? '下架' : '上架' }}</el-button>
              <el-button size="mini" @click="delQuestion(scope.row)" :class="{ disabled: scope.row.publishState === 1 }" :disabled="scope.row.publishState === 1">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页功能 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryForm.pagesize"
        layout="prev, pager, next,sizes, jumper"
        :total="counts"
        style="text-align: right; margin-top: 20px"
      >
      </el-pagination>

      <questions-check :dialogVisible="checkDialogVisible" @close="checkDialogVisible = false" :questionItem="questionItem"></questions-check>
    </el-card>
  </div>
</template>
<script>
// 导入学科列表
import { list as subList } from '@/api/hmmm/subjects'
// 导入常量（题型，难度，方向）
import { direction, difficulty, questionType, publishType, chkType } from '@/api/hmmm/constants'
// 导入城市数据
import { provinces, citys } from '@/api/hmmm/citys'
// 导入用户/录题人
import { list as userList } from '@/api/base/users'
// 导入精选题库列表
import { choice, remove, choicePublish } from '@/api/hmmm/questions'
// 导入试题审核组件
import QuestionsCheck from '../components/questions-check'
export default {
  components: {
    QuestionsCheck
  },
  data () {
    return {
      queryForm: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null,
        page: 1,
        pagesize: 5
      },
      subject: [],
      questionType: [],
      difficulty: [],
      direction: [],
      userList: [],
      questionList: [],
      checkDialogVisible: false,
      counts: 0, // 数据总数
      province: provinces(),
      citys: [],
      activeName: 'all', // 标签页默认 'all'
      publishType: [],
      chkType: [],
      questionItem: {}
    }
  },

  methods: {
    // 获取初始数据
    async getSubList () {
      try {
        const { data } = await subList()
        this.subject = data.items
        this.direction = direction
        this.difficulty = difficulty
        this.questionType = questionType
        this.publishType = publishType
        this.chkType = chkType
        // console.log(citys('北京市'))
      } catch (err) {

      }
    },
    // 获取用户列表
    async getUserList () {
      try {
        const { data } = await userList()
        this.userList = data.list
        // console.log(this.userList)
      } catch (err) {

      }
    },
    // 重置搜索
    resetForm () {
      this.$refs.queryForm.resetFields()
      this.queryForm.province = ''
      this.queryForm.city = ''
      this.getQuestionList()
    },
    // 获取题库列表
    async getQuestionList () {
      try {
        const { data } = await choice(this.queryForm)
        console.log(data.items)
        this.counts = data.counts
        this.questionList = data.items
      } catch (err) {

      }
    },
    // 审核试题页面
    questionsCheck (item) {
      this.checkDialogVisible = true
      this.questionItem = item
    },
    // 页码发生变化时
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.queryForm.pagesize = val
      this.getQuestionList()
    },
    // 当前页发生变化
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.queryForm.page = val
      this.getQuestionList()
    },
    // 新增试题
    addQuestion () { },
    // 筛选框 学科改变
    onsubChange () { },
    //
    onDirectoryChange () { },
    // 城市改变时
    onProvinceChange (val) {
      // console.log('aaaa')
      this.queryForm.city = ''
      this.citys = citys(val)
      // console.log(citys('北京'))
    },
    // 切换标签页
    handleClick () {
      switch (this.activeName) {
        case 'all':
          this.queryForm.chkState = null
          this.getQuestionList()
          break
        case '0':
          this.queryForm.chkState = 0
          this.getQuestionList()
          break
        case '1':
          this.queryForm.chkState = 1
          this.getQuestionList()
          break
        case '2':
          this.queryForm.chkState = 2
          this.getQuestionList()
          break
      }
    },
    // 获取题型
    getQuesType (val) {
      // console.log(this.questionType)
      // console.log(val)
      return this.questionType.find(item => item.value === val - 0).label
    },
    // 获取难度
    getdifficulty (val) {
      return this.difficulty.find(item => item.value === val - 0).label
    },
    // 获取发布状态
    getpublishState (val) {
      return this.publishType.find(item => item.value === val - 0 + 1).label
    },
    getchkType (val) {
      return this.chkType.find(item => item.value === val - 0 + 1).label
    },
    // 上架下架
    pubQuestion (item, e) {
      this.$confirm('确认' + e.target.innerText + '这道题目吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let data = {}
        switch (e.target.innerText) {
          case '上架':
            data = await choicePublish({
              id: item.id,
              publishState: 1
            })
            break
          case '下架':
            data = await choicePublish({
              id: item.id,
              publishState: 2
            })
            break
        }
        if (data.status === 200) {
          this.$message({
            type: 'success',
            message: e.target.innerText + '成功!'
          })
        }
        this.getQuestionList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除试题
    delQuestion (item) {
      // console.log(item)
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await remove(item)
        // console.log(data)
        if (data.status === 200) {
          this.getQuestionList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  created () {
    this.getSubList()
    this.getUserList()
    this.getQuestionList()
  }
}
</script>
<style scoped lang="less">
.el-card {
  background-color: #fff;
  margin: 10px;
  .cz-btn {
    .el-button {
      font-size: 10px;
      border: transparent;
      padding: 10px;
      margin: 0;
      color: #409eff;
      background: none;
      &:link {
        color: #606266;
        background: none;
      }
      &:visited {
        color: #606266;
      }
      &:hover {
        background: none;
        color: #606266;
      }
      &:active {
        background: none;
        color: #606266;
      }
    }
  }
}

.el-form-item {
  margin-top: 10px;
}
.province {
  width: 48%;
  margin-right: 4%;
}
.city {
  width: 48%;
}
.el-input__inner {
  width: 100%;
}
.el-alert {
  margin-bottom: 10px;
}
//按钮禁用状态下 按钮颜色
.disabled {
  color: #c0c4cc !important;
}
</style>
